<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <div id="app" style="color: red; font-size: 30px"></div>

    <script>
        const { color, fontSize } = document.getElementById("app");
        console.log(color, fontSize);
    </script>

    <script type="text/babel">
        /* 
    1. 可以是js的表达式, 不能是js的语句
    2. 可以是任意基本类型值, 但null、undefined和布尔值没有任何显示
    3. 可以是一个js数组, 但不能是js对象
    4. 可以是react元素对象
    5. style属性值必须是一个包含样式的js对象

    数组: 会自动遍历数组中的每个元素依次显示出来
    */

        let title = 'abc'
        const vDom = (
            <div>
                <h2 title={title}>{title.toUpperCase()}</h2>
                <h3>{123}--{'abc'}</h3>
                <h3>--{null}--{undefined}--{true}--{false}</h3>
                <h3>{['avb', 123]}</h3>
                {/* jsx中不能写对象 */}
                {/*  <h3>{{a: 1, b: 'abc'}}</h3> */}
                <h3>{React.createElement('span',null,'我是span')}</h3>
                <h3 style={{color:'red', fontSize:'20px'}}>style属性文本</h3>
                <input type="text" /> {/*必须有结束标签。可以自闭和*/}
            </div>
             //<div></div> 有且只能有一个跟标签
        )

        // 渲染虚拟DOM
        ReactDOM.render(vDom,document.getElementById('app'))
    </script>
</body>

</html>